<template>
  <div class="app-container">
    <!-- 查询和其他操作 -->
    <div class="filter-container">
      <el-button
        v-permission="['operation:distributionwithdraw:list']"
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查找</el-button>
    </div>

    <!-- 查询结果 -->
    <el-table
      v-loading="listLoading"
      :data="list"
      size="small"
      element-loading-text="正在查询中。。。"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" prop="id" />

      <el-table-column align="center" label="支付单号" prop="tradeNo" />

      <el-table-column align="center" label="分销Id" prop="distributionId" />

      <el-table-column align="center" label="用户Id" prop="userId" />

      <el-table-column align="center" label="金额" prop="sum">
        <template slot-scope="scope">
          {{ scope.row.sum / 100.0 }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="申请时间" prop="gmtCreate" >
        <template slot-scope="scope">{{ scope.row.gmtCreate | formatGmt }}</template>
      </el-table-column>

      <el-table-column align="center" label="修改时间" prop="gmtUpdate" >
        <template slot-scope="scope">{{ scope.row.gmtUpdate | formatGmt }}</template>
      </el-table-column>

      <el-table-column align="center" label="操作" width="200" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-permission="['operation:distributionwithdraw:audit']"
            v-if="scope.row.status === 0"
            type="primary"
            size="mini"
            @click="handleAudit(scope.row, 1)"
          >同意</el-button>
          <el-button
            v-permission="['operation:distributionwithdraw:audit']"
            v-if="scope.row.status === 0"
            type="danger"
            size="mini"
            @click="handleAudit(scope.row, 2)"
          >拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<style>
</style>

<script>
import { listDistributionWithdraw, auditDistributionWithdraw } from '@/api/distribution'
import { getToken } from '@/utils/auth'
import Pagination from '@/components/Pagination'
import ElOption from '../../../node_modules/element-ui/packages/select/src/option' // Secondary package based on el-pagination

const withdrawStatusMap = [{ value: 0, name: '冻结' }, { value: 1, name: '激活' }, { value: '', name: '全部' }]

export default {
  name: 'DistributionWithdraw',
  components: {
    ElOption,
    Pagination
  },

  data() {
    return {
      withdrawStatusMap,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNo: 1,
        limit: 20
      }
    }
  },
  computed: {
    headers() {
      return {
        accessToken: getToken()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listDistributionWithdraw(this.listQuery)
        .then(response => {
          this.list = response.data.data.items
          this.total = response.data.data.total
          this.listLoading = false
        })
        .catch(() => {
          this.list = []
          this.total = 0
          this.listLoading = false
        })
    },
    handleAudit(row, status) {
      let msg = ''
      if (status === 1) {
        msg = '您是否要“同意”该分销人员的提现请求'
      } else if (status === 2) {
        msg = '您是否要“拒绝”该分销人员的提现请求'
      }
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        auditDistributionWithdraw(row.id, status)
          .then(response => {
            this.$notify.success({
              title: '成功',
              message: '操作成功'
            })
            this.getList()
          })
          .catch(response => {
            this.$notify.error({
              title: '失败',
              message: response.data.errmsg
            })
          })
      }).catch(() => {
        return false
      })
    }
  }
}
</script>
